import { useEffect, useState } from 'react'
import styles from "../css/Books.module.scss"
import HeaderList from "../components/HeaderList"
import TypeSelect from "../components/TypeSelect"
import { Card, Pagination } from "antd"
import { getBookList } from "../api/book"
import { IBookList } from "../typings/index"
import { useNavigate } from 'react-router-dom'
import { useSelector } from 'react-redux'
import { IStore } from "../redux/typings"

const { Meta } = Card;

function Books() {
    const [bookList, setBookList] = useState([]);
    const [pageInfo, setPageInfo] = useState({
        current: 1,
        pageSize: 15,
        total: 0
    });
    const [options, setOptions] = useState({
        current: 1,
        pageSize: 10,
        issueStatus: true,
        typeId: ""
    })

    const navigate = useNavigate()
    const { bookTypeId } = useSelector((state: IStore) => state.type);

    const fetchData = async () => {
        try {
            const { data } = await getBookList(options)
            setBookList(data.data.data)
            setPageInfo({
                current: data.data.currentPage,
                pageSize: data.data.eachPage,
                total: data.data.count
            })
        } catch (e) {
            console.log(e)
        }

    }

    useEffect(() => {
        fetchData();
    }, [options.current, options.pageSize, options.typeId])

    useEffect(() => {
        setOptions({
            current: 1,
            pageSize: options.pageSize,
            issueStatus: true,
            typeId: bookTypeId === "all" ? '' : bookTypeId
        })
    }, [bookTypeId])

    const renderBook = () => {
        if (bookList.length) {
            const bookData = bookList.map((item: IBookList, index: number) => {
                return <Card
                    hoverable
                    style={{
                        width: 200,
                        marginBottom: 30
                    }}
                    cover={<img alt="example" style={{
                        width: 160,
                        height: 200,
                        margin: 'auto',
                        marginTop: 10
                    }} src={item?.bookPic} />}
                    key={index}
                    onClick={() => navigate(`/books/${item._id}`)}
                >
                    <Meta title={item?.bookTitle} />
                    <div className={styles.numberContainer}>
                        <div>浏览数：{item?.scanNumber}</div>
                        <div>评论数：{item?.commentNumber}</div>
                    </div>
                </Card>
            })
            if (bookList.length % 5 !== 0) {
                var blank = 5 - bookList.length % 5;
                for (let i = 1; i <= blank; i++) {
                    bookData.push(<div style={{ width: 220, marginBottom: 20 }} key={i * Math.random()}></div>)
                }
            }
            return bookData;
        }
        return <></>
    }

    const handlePageChange = (current: number, pageSize: number) => {
        setOptions({
            current,
            pageSize,
            issueStatus: true,
            typeId: options.typeId
        })
    }

    return (
        <div>
            <HeaderList title="最新资源">
                <TypeSelect />
            </HeaderList>
            <div className={styles.bookContainer}>
                {renderBook()}
            </div>
            <div className="paginationContainer">
                {
                    bookList.length > 0 ? (
                        <Pagination showQuickJumper defaultCurrent={1}  {...pageInfo} onChange={handlePageChange} />
                    ) : (
                        <div style={{
                            fontSize: "26px",
                            fontWeight: "200"
                        }}>该分类下暂无书籍</div>
                    )
                }

            </div>
        </div>
    )
}

export default Books
